<template>

	<view>
		
		<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;margin-top: 80rpx;">
			<view v-if="hotdata.length>0" v-for="(item,index) in hotdata" class="goodsbox" @click="godetail(item.id)">
				<image :src="item.thumb" style="width:100%;height:350rpx;border-radius:15rpx ;"></image>
				<view style="display: flex; justify-content: space-between;">
					<text class="ellipsis" style="font-weight: bold;font-size: 30rpx;">
						{{item.name}}
					</text>
				<image src="../../static/jindou.png" style="width:60rpx;height:65rpx;"></image></view>
				
				<view style="display: flex; justify-content: space-between;">	
				<text style="color:red;width: 100%;">￥ {{item.present_price}}</text>
				<text style="color:#8228f9;">￥{{item.preferential_price}}</text>
				</view>
				<view>
				<text style="color:lightgrey;"> 已售{{item.sale_nums}}件</text>
				</view>
			</view>
			<view v-if="hotdata.length<=0" style="text-align: center;padding:15%;">
				<image src="https://lbqny.migugu.com/admin/public/no-data-2.png" style="width: 514rpx;height:260rpx;"></image>
				<text style="color:lightgrey;">暂无相关数据哦</text>
			</view>
			<!-- <abnor v-if="hotdata.length<=0"></abnor> -->
			
		</view>
		
		<view class="paydoudou" >
			<!-- <image v-if="searchwords.length>0" style=" margin-left: 30px;width: 30rpx;height: 30rpx;display: inline-block;position: relative;top:46rpx;left:180rpx; " src="https://lbqny.migugu.com/admin/public/search.png" mode=""></image> -->
		<input style="margin-left: 10px;width:80%;border-radius: 15rpx;" type="text" class="search" placeholder="输入搜索关键词" v-model="searchwords" confirm-type="search" @confirm="onSearch"/>
		<text v-if="searchwords.length>0" @click="searchdata" style="color: #fff;background-color: #157347;border-color: #146c43;padding:20rpx 30rpx;border-radius: 20rpx;margin-top: 20rpx;">搜索</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				hotdata:[],
				title:'',
				searchwords:''
			}
		},
		  onBackPress(options) {  
		    uni.redirectTo({
		    	url:'/pages/service'
		    })
		  } , 
		onLoad(options)
		{
			let stype=0
			if(options.t==1){
				uni.setNavigationBarTitle({
					title:'热销专区'
				})
				stype=2
			}else{
				uni.setNavigationBarTitle({
					title:'金V特供'
				})
				stype=3
			}
			console.log(options)
			this.gethotdata(stype)
			
		},
		methods: {
			godetail(gid)
			{
				let url = `/user/pages/shop/goods-detail-pay?id=`+gid
				this.$util.goUrl({
					url
				})
			},
			async gethotdata(type)
			{
				let data = await this.$api.service.gethotdata({
					order: 1,
					stype:type
				})
				this.hotdata = data
				console.log(this.hotdata.length)
			},
			async searchdata()
			{
				let data = await this.$api.service.gethotdata({
					order: 1,
					words:this.searchwords
				})
				this.hotdata = data
				console.log(this.hotdata.length)
			}
		}
	}
</script>

<style>
.goodsbox{
	width: 48%;
	height: 510rpx;
	padding: 8rpx;
	margin:4rpx;
	margin-top: 15rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.search {
				height: 60rpx;
				width: 350rpx;
				padding-left: 0rpx;
				margin-left: 20rpx;
				overflow: hidden;
				background-color: #fff;
				border-radius: 5rpx;
				float: left;
			}
.paydoudou{
		   position: fixed;
		   top: 10rpx; 
		   width: 100%; 
		   padding: 6rpx;
			z-index: 999;		
		   background-color: #fff;
		}
</style>
